<template>
  <div>
    <div class="tops">
      <div>
        <van-icon name="arrow-left" @click="home" />
        <van-icon name="wap-home-o" />
      </div>
      <div class="tops_box">
        <img src="../assets/首页_03.jpg" alt="" />
      </div>
    </div>

    <div class="nr">
      <div class="nr_box" @click="$router.push('/mycuents')">
        <img src="../assets/我的客户.png" alt="" />
        <div>
          <p>我的客户</p>
          <p>MY CUENTS</p>
        </div>
      </div>

      <div class="nr_box" @click="$router.push('/customer')">
        <img src="../assets/客户关怀.png" alt="" />
        <div>
          <p>客户关怀</p>
          <p>CUSTOMER</p>
        </div>
      </div>

      <div class="nr_box" @click="$router.push('/newcenter')">
        <img src="../assets/消息中心.png" alt="" />
        <div>
          <p>消息中心</p>
          <p>NEWS</p>
        </div>
      </div>

      <div class="nr_box" @click="$router.push('/logistics')">
        <img src="../assets/物流单.png" alt="" />
        <div>
          <p>物流单</p>
          <p>LOGISTICS</p>
        </div>
      </div>
    </div>

    <div class="caidan">
      <div class="caidan_box"@click="$router.push('/expresswaybill')">
        <van-grid class="yellow" >
          <van-icon name="comment-o" size="1.8rem" />
          <div>联系</div>
        </van-grid>
      </div>

      <van-grid>
        <van-grid-item icon="wap-home" text="系统功能" class="grids" />
        <van-grid-item
          icon="contact"
          text="个人中心"
          class="grids"
          @click="$router.push('/personalcenter')"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    home() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
.tops {
  width: 100%;
  background: #00349a;
}
.tops div {
  display: flex;
  justify-content: space-between;
  font-size: 1.5rem;
  color: #fff;
  padding: 0.5rem 0.8rem;
}
.tops_box {
  height: 8rem;
}
.tops_box img {
  margin: 1.5rem;
  width: 80%;
  display: block;
}
.nr {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.nr_box {
  display: flex;
  flex-direction: column;
  width: 40%;
  background: #fff;
  padding: 1.3rem 0rem;
  margin: 0.6rem;
}
.nr_box img {
  width: 35%;
  display: block;
  margin-left: 3.3rem;
}
.nr_box div {
  margin-top: 1.5rem;
  text-align: center;
}

.caidan {
  width: 100%;
  /* height: 5.5rem; */
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}
.caidan .van-grid {
  display: flex;
  justify-content: space-around;
}
.caidan_box {
  position: relative;
}
.yellow {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  position: absolute;
  top: -2rem;
  left: 9rem;
  background: yellow;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #fff;
  padding: 0.8rem;
  box-sizing: border-box;
}
</style>